<template>
  <div class="mapBox">
    <div class="dropdown">
      <el-dropdown @command="command">
        <el-button size="mini"> 切换地图 </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="BMAP_NORMAL_MAP"
            >标准地图</el-dropdown-item
          >
          <el-dropdown-item command="BMAP_EARTH_MAP">地球模式</el-dropdown-item>
          <el-dropdown-item command="BMAP_SATELLITE_MAP"
            >普通卫星地图</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div id="container"></div>
    <div v-show="true">
      <el-table id="elTable" :data="tableData" style="width:300px;height:240px">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "map1",
  data() {
    return {
      map: null,
      Markers:[], //标记点数组
      tableData : [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化地图
    init() {
      this.map = new BMapGL.Map("container", {
        // 禁止地图旋转和倾斜
        // enableRotate: false,
        // enableTilt: false
      });

      this.mapBasicOption(); //地图基础配置
      this.createMarker(); //创建标记
      this.mapZoom(); // 地图缩放
      this.mapDrawShord(); // 绘制覆盖物
      this.aa()
    },

    // 地图基础配置
    mapBasicOption() {
      this.map.enableScrollWheelZoom(true); // 开启缩放
      this.map.setHeading(64.5); //设置默认旋转角度
      this.map.setTilt(73); //设置默认倾斜角度
      this.map.centerAndZoom({ lat: 39.915, lng: 116.404 }, 15); //定位 缩放大小值越小越高
      this.map.setMapType(BMAP_SATELLITE_MAP); //地图类型
      var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
      var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
      var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
      this.map.addControl(cityCtrl);
      this.map.addControl(scaleCtrl);
      this.map.addControl(zoomCtrl);
      // var heatmapOverlay = new BMapGL.HeatmapOverlay({"radius":20});
      // this,map.addOverlay(heatmapOverlay);

    },
    // 热力图
    aa(){
      let self = this
      var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 20}); // 创建热力图层
      self.map.addOverlay(heatmapOverlay); // 将热力图层添加到地图
      console.log(heatmapOverlay.setDataSet)

      // var points = []; // 存储热力图数据的点集合
      // // 添加坐标点
      // points.push(new BMapGL.Point(116.395, 39.920));
      // points.push(new BMapGL.Point(116.397, 39.915));
      // points.push(new BMapGL.Point(116.387, 39.925));
      // points.push(new BMapGL.Point(116.398, 39.903));
      // // 设置热力图数据集
      // heatmapOverlay.setDataSet({data: points, max: 100});
    },
    //创建标记
    createMarker() {
      let self = this;

      // marker标记
      var point = new BMapGL.Point(116.404, 39.915);
      // var marker = new BMapGL.Marker(point); // 创建标注
      // this.map.addOverlay(marker); // 将标注添加到地图中

      var myIcon = new BMapGL.Icon(
        "https://img1.baidu.com/it/u=3302184040,3713353210&fm=253&fmt=auto&app=138&f=JPEG",
        new BMapGL.Size(100, 100),
        {
          // 图标中央下端的尖角位置。
          anchor: new BMapGL.Size(50, 50),
          // 设置图片偏移。
          // imageOffset: new BMapGL.Size(0, 10)   // 设置图片偏移
        }
      );
      // 创建标注对象并添加到地图
      var markers = new BMapGL.Marker(point, { icon: myIcon });
      this.map.addOverlay(markers);


      // marker点击事件的弹窗
      markers.addEventListener("click", function () {
        // 弹echarts
        {
          // 创建信息窗口对象
          // var infoWindow = new BMapGL.InfoWindow( `<div id="mainEcharts" ref="mainEcharts" :v-loading='true' style="width:200px;height:140px"></div> `,{width: 220, height: 150 });
          // self.map.openInfoWindow(infoWindow, point); //开启信息窗口
          // // 通过定时器进异步队列
          // setTimeout(()=>{
          //   let dom =   document.querySelector('#mainEcharts')
          //   var myChart = echarts.init(dom);
          //   var option = {
          //     xAxis: {
          //       type: 'category',
          //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          //     },
          //     yAxis: {
          //       type: 'value'
          //     },
          //     grid:{
          //       top:20,
          //       left:30,
          //       bottom:20,
          //       right:20
          //     },
          //     series: [
          //       {
          //         data: [150, 230, 224, 218, 135, 147, 260],
          //         type: 'line'
          //       }
          //     ]
          //   };
          //   myChart.setOption(option)
          // },20)
        }
        // 弹el-table
        let dom = `
          <div id="elTableWarp"  style="width:300px;height:240px"></div> 
        `
        var infoWindow = new BMapGL.InfoWindow( dom ,{width: 320, height: 250 });
        self.map.openInfoWindow(infoWindow, point); //开启信息窗口
        self.$nextTick(()=>{
          document.getElementById('elTableWarp').appendChild(document.getElementById('elTable'))
          // console.log(,document.getElementById('elTable'))
        })
      });

      this.Markers.push(markers)
    },
    // 地图缩放
    mapZoom() {
      let self = this;
      this.map.addEventListener("zoomend", function (e) {
        var ZoomNum = self.map.getZoom();
 
        // self.map.removeOverlay(self.Markers[0])
        self.Markers.forEach(item=>{
          self.map.removeOverlay(item)



           var newPosition = new BMapGL.Point(item.latLng.lng,item.latLng.lat);
          var myIcon = new BMapGL.Icon(
            item._config.icon.imageUrl,
            new BMapGL.Size(50, 50),
            {
              // 图标中央下端的尖角位置。
              anchor: new BMapGL.Size(25, 25),
              // 设置图片偏移。
              // imageOffset: new BMapGL.Size(0, 10)   // 设置图片偏移
            }
          );
          // 创建标注对象并添加到地图
          var markers = new BMapGL.Marker(newPosition, { icon: myIcon });
          self.map.addOverlay(markers);
            



          // console.log(item)
          // console.log(item.getIcon())

          // var icon = item.getIcon();
          // // 获取标记点的缩放级别
          // // var zoomLevel = icon.imageSize.width;
          // // 缩小缩放级别
          // var newZoomLevel = {width:50,height:50};
          // // 更新标记点的缩放级别
          // icon.setImageSize(newZoomLevel);
          // // 更新标记点的图标
          // item.setIcon(icon);

          // item.anchor = {height:100,with:100}
          // // var newAnchor = new BMapGL.Size(25, 25); // 假设 newAnchorX 和 newAnchorY 是新的锚点坐标
          // // // 设置标记点的锚点
          // // item.setAnchor(newAnchor);


          // // 重写标记
          // var newPosition = new BMapGL.Point(item.latLng.lng,item.latLng.lat);
          // item.setPosition(newPosition);
        })



      });
    },
    // 绘制覆盖物
    mapDrawShord() {
      let coord = [
        new BMapGL.Point(116.387112, 39.920977),
        new BMapGL.Point(116.385243, 39.913063),
        new BMapGL.Point(116.394226, 39.917988),
      ];
      setTimeout(() => {
        var polygon = new BMapGL.Polyline(coord, {
          strokeColor: "red",
          strokeWeight: 2,
          strokeOpacity: 0.5,
        }); //创建多边形
        this.map.addOverlay(polygon); //绘制覆盖物
      }, 3000);
    },
    // 切换地图类型
    command(val, val1) {
      if (val == "BMAP_NORMAL_MAP") {
        this.map.setMapType(BMAP_NORMAL_MAP);
      } else if (val == "BMAP_EARTH_MAP") {
        this.map.setMapType(BMAP_EARTH_MAP);
      } else {
        this.map.setMapType(BMAP_SATELLITE_MAP);
      }
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .BMap_bubble_pop {
  background-color: rgba(36, 105, 137, 0.8) !important;
  border: none !important;
  .BMap_bubble_title,
  .BMap_bubble_content {
    color: white !important;
  }
}

.mapBox {
  width: 100%;
  height: 100%;
  position: absolute;
  #container {
    width: 100%;
    height: 100%;
  }
  .dropdown {
    position: absolute;
    top: 10px;
    left: 100px;
    z-index: 100;
    &/deep/ .el-button {
      padding: 9px 10px;
    }
  }
}
</style>